<template>
    <div :class="type == 'special' ? 'special' : 'deno'">
        <div class="buts">
            <el-input size="small" v-model="templateCode" placeholder="编号" clearable />
            <el-input name="hsCode" size="small" v-model="hsCode" placeholder="恒生编码" clearable />
            <el-input size="small" v-model="templateName" placeholder="资产名称" clearable />
            <!-- 特殊计算按钮 -->
            <div v-if="type == 'special'" style="margin-right: 10px">
                <el-button type="primary" id="special-template-test-search" size="mini" v-authCode.show="B_0091" @click="queryData">查询</el-button>
                <el-button type="primary" id="special-template-test-btn_add" size="mini" v-authCode.show="B_0092" @click="addTabs('add-special', '')"
                    >新增</el-button
                >
                <el-button type="primary" size="mini" v-authCode.show="B_0332" @click="openStatusDialog('1')">启用</el-button>
                <el-button type="danger" size="mini" v-authCode.show="B_0333" @click="openStatusDialog('0')">禁用</el-button>
            </div>
            <!-- 分母按钮 -->
            <div v-else style="margin-right: 10px">
                <el-button type="primary" id="deno-template-test-search" size="mini" v-authCode.show="B_0330" @click="queryData">查询</el-button>
                <el-button type="primary" id="deno-template-test-btn_add" size="mini" v-authCode.show="B_0331" @click="addTabs('add-deno', '')"
                    >新增</el-button
                >
                <el-button type="primary" size="mini" v-authCode.show="B_0334" @click="openStatusDialog('1')">启用</el-button>
                <el-button type="danger" size="mini" v-authCode.show="B_0335" @click="openStatusDialog('0')">禁用</el-button>
            </div>

            <!-- <el-button type="primary" size="mini" @click="openStatusDialog('1')">启用</el-button>
            <el-button type="danger" size="mini" @click="openStatusDialog('0')">禁用</el-button> -->
        </div>
        <div class="tables">
            <el-table
                :header-cell-style="{ backgroundColor: '#e8f3ff', padding: '4px 0', 'text-align': 'center' }"
                :cell-style="{ padding: '0' }"
                :row-style="{ height: '35px' }"
                :header-row-style="{ height: '35px', padding: '5px 0' }"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                border
                size="mini"
                height="70vh"
                v-loading="loading"
                @selection-change="handleSelectionChange"
                @sort-change="handleSort"
            >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column label="编号" width="120" prop="specialCode" show-overflow-tooltip> </el-table-column>
                <el-table-column label="恒生编码" width="120" prop="hsCode" show-overflow-tooltip> </el-table-column>
                <el-table-column label="资产名称" prop="specialName" show-overflow-tooltip> </el-table-column>
                <el-table-column label="模板状态" prop="status" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span v-if="scope.row.status == '1'" style="color: green"> 启用</span>
                        <span v-else style="color: red">禁用</span>
                    </template>
                </el-table-column>

                <el-table-column label="更新日期" width="180" prop="modifyDate" show-overflow-tooltip align="center" sortable="custon">
                    <template slot-scope="scope">
                        {{ dateFormat(scope.row.modifyDate) }} {{ timeFormat(scope.row.modifyTime) }}
                    </template>
                </el-table-column>
                <!-- <el-table-column label="更新时间" width="150" prop="modifyTime" show-overflow-tooltip align="center">
                    <template slot-scope="scope">
                        {{ timeFormat(scope.row.modifyTime) }}
                    </template>
                </el-table-column> -->
                <el-table-column label="更新人" width="150" prop="modifyUser" show-overflow-tooltip> </el-table-column>
                <el-table-column label="操作" width="150">
                    <template slot-scope="scope">
                        <!-- 特殊计算按钮 -->
                        <div v-if="type == 'special'">
                            <RiskIconButton
                                type="primary"
                                v-authCode="B_0088"
                                icon="el-icon-view"
                                topTitle="查看详情"
                                size="mini"
                                @on-click="addTabs(type == 'special' ? 'look-special' : 'look-deno', scope.row.hsCode)"
                            ></RiskIconButton>
                            <RiskIconButton
                                type="primary"
                                v-authCode="B_0089"
                                icon="el-icon-edit"
                                topTitle="编辑详情"
                                size="mini"
                                @on-click="addTabs(type == 'special' ? 'edit-special' : 'edit-deno', scope.row.hsCode)"
                            ></RiskIconButton>
                            <RiskIconButton
                                type="danger"
                                v-authCode="B_0090"
                                icon="el-icon-delete"
                                topTitle="删除详情"
                                size="mini"
                                @on-click="deleteOne(scope.row)"
                            ></RiskIconButton>
                        </div>
                        <!-- 分母按钮 -->
                        <div v-else>
                            <RiskIconButton
                                type="primary"
                                v-authCode="B_0327"
                                icon="el-icon-view"
                                topTitle="查看详情"
                                size="mini"
                                @on-click="addTabs(type == 'special' ? 'look-special' : 'look-deno', scope.row.hsCode)"
                            ></RiskIconButton>
                            <RiskIconButton
                                type="primary"
                                v-authCode="B_0328"
                                icon="el-icon-edit"
                                topTitle="编辑详情"
                                size="mini"
                                @on-click="addTabs(type == 'special' ? 'edit-special' : 'edit-deno', scope.row.hsCode)"
                            ></RiskIconButton>
                            <RiskIconButton
                                type="danger"
                                v-authCode="B_0329"
                                icon="el-icon-delete"
                                topTitle="删除详情"
                                size="mini"
                                @on-click="deleteOne(scope.row)"
                            ></RiskIconButton>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <risk-pagination :paging="paging" @page-change="currentChange"></risk-pagination>
            </div>
        </div>
        <yh-dialog drag title="查询特殊计算" :visible.sync="specialVisible" width="460px" :before-close="closeBound" v-loading="loading">
            <el-form ref="form" label-width="100px" size="mini">
                <el-form-item label="风控编码">
                    <el-input v-model="templateCode" clearable />
                </el-form-item>
                <el-form-item label="恒生编码">
                    <el-input v-model="hsCode" clearable />
                </el-form-item>
                <el-form-item label="名称">
                    <el-input v-model="templateName" clearable />
                </el-form-item>
                <!-- <el-form-item label="更新日期">
                    <el-date-picker v-model="modifyDate" type="date" format="yyyyMMdd" value-format="yyyyMMdd" size="mini"></el-date-picker>
                </el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="closeBound"> 取 消 </el-button>
                <el-button size="mini" @click="resetBoundData"> 重 置 </el-button>
                <el-button size="mini" type="primary" @click="specialClick">确 定 </el-button>
            </div>
        </yh-dialog>
        <yh-dialog drag title="确定要删除吗？" :visible.sync="deleteVisible" width="460px" v-loading="loading">
            <div class="delete">
                {{ deleteValue }}
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="deleteVisible = false"> 取 消 </el-button>
                <el-button size="mini" type="primary" @click="deleteData">确 定 </el-button>
            </div>
        </yh-dialog>

        <!-- 启用、禁用 -->
        <yh-dialog :title="dialogTitle" :visible.sync="statusDialog" width="600px" v-loading="loading" drag>
            <div>
                {{ selectionCodeList.map(item => item).join(',') }}
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="statusDialog = false">取 消</el-button>
                <el-button size="mini" type="primary" @click="handleStatusChange">确 定 </el-button>
            </div>
        </yh-dialog>
    </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import DictionConstUtil, { SGU_CACHE } from '@/utils/diction-const-util';
import RiskIconButton from '@/common/components/risk-icon-button.vue';
import { mixins } from 'vue-class-component';
import RiskEmitter from '@/common/mixis/risk-emitter.vue';
import { timeFormat, dateFormat } from '@/utils/tools';
import RiskPagination from '@/common/components/risk-pagination.vue';

@Component({
    name: 'ItemSpecialCalc',
    components: {
        RiskIconButton,
        RiskPagination,
    },
})
export default class ItemSpecialCalc extends mixins(RiskEmitter) {
    @Prop() editableTabsValue: any;
    @Prop() type; // 取值：(special)特殊计算、(deno)分母
    dateFormat = dateFormat;
    timeFormat = timeFormat;
    tableData: any[] = [];
    paging: any = {
        total: 0,
        currentPage: 1,
        totalPage: 0,
        pageSize: 25,
    };
    hsCode: any = '';
    modifyDate: any = '';
    templateCode: any = '';
    templateName: any = '';
    loading: boolean = false;
    specialVisible: boolean = false;
    deleteVisible: boolean = false;
    deleteValue: string = '';
    deleteCode: any = null;

    api: string = ''; // 请求url
    selectionList: any[] = []; // 表格勾选项
    dialogTitle: string = '';
    statusDialog: boolean = false; // 禁用、启用对话框
    changeStatus: string = '';
    selectionCodeList: any[] = [];
    sort: string = '';
    // 排序字段
    sortableObj = {
        modifyDate: 'CONCAT(D_MODIFY_DATE,D_MODIFY_TIME)',
    };
    // lookBtnAuthCode: string = '';
    // editBtnAuthCode: string = '';
    // delBtnAuthCode: string = '';
    // addBtnAuthCode: string = '';
    // queryBtnAuthCode: string = '';

    // async mounted() {
    //     this.getSpecialTemplateList(this.paging, this.hsCode, this.modifyDate, this.templateCode, this.templateName);
    // }

    @Watch('type', { immediate: true, deep: true })
    onWatchType() {
        this.api = '';
        // 特殊计算
        if (this.type == 'special') {
            this.api = '/entry/template/special';
            // this.lookBtnAuthCode = 'B_0088';
            // this.editBtnAuthCode = 'B_0089';
            // this.delBtnAuthCode = 'B_0090';
            // this.queryBtnAuthCode = 'B_0091';
            // this.addBtnAuthCode = 'B_0092';
        } else if (this.type == 'deno') {
            // 分母
            this.api = '/entry/template/deno';
        }
        this.getSpecialTemplateList(this.paging, this.hsCode, this.modifyDate, this.templateCode, this.templateName);
    }

    @Watch('editableTabsValue', { immediate: true, deep: true })
    watchEdittabes() {
        // if (this.editableTabsValue == '特殊计算&分母') {
        //     this.getSpecialTemplateList(this.paging, this.hsCode, this.modifyDate, this.templateCode, this.templateName);
        // }
        if (['特殊计算', '分母'].includes(this.editableTabsValue)) {
            this.getSpecialTemplateList(this.paging, this.hsCode, this.modifyDate, this.templateCode, this.templateName);
        }
        // /
    }

    // // 新增按钮权限
    // get computedAddBtnAuth() {
    //     return
    // }

    queryData() {
        this.getSpecialTemplateList(this.paging, this.hsCode, this.modifyDate, this.templateCode, this.templateName);
    }

    // 获取列表数据
    getSpecialTemplateList(paging: any, hsCode: any, modifyDate: any, templateCode: any, templateName: any) {
        let datas = {
            paging: paging,
            hsCode: hsCode,
            modifyDate: modifyDate,
            templateCode: templateCode,
            templateName: templateName,
            sort: this.sort
        };
        this.loading = true;
        this.$axios
            .post(this.api + '/list', datas)
            .then((res: any) => {
                this.loading = false;
                this.tableData = res.list;
                this.paging.total = res.total;
                this.paging.totalPage = res.totalPage;
            })
            .catch(() => {
                this.loading = false;
                this.tableData = [];
                this.paging.total = 0;
                this.paging.totalPage = 0;
            });
    }

    closeBound() {
        this.resetBoundData();
        this.specialVisible = false;
    }

    resetBoundData() {
        this.templateCode = '';
        this.modifyDate = '';
        this.templateName = '';
        this.hsCode = '';
    }

    // 回调函数
    addTabs(data: any, val: any) {
        let datas: any = {};
        datas.type = data;
        datas.value = val;
        this.dispatch('ItemTemplate', 'addTables', datas);
    }

    // 删除的数据
    deleteOne(val: any) {
        this.deleteVisible = true;
        this.deleteCode = val.hsCode;
        this.deleteValue = val.hsCode + '---' + val.specialName;
    }

    // 删除
    deleteData() {
        this.loading = true;
        this.$axios
            .get(this.api + '/delete/' + this.deleteCode)
            // .get('/entry/template/special/delete/' + this.deleteCode)
            .then(res => {
                this.loading = false;
                this.deleteVisible = false;
                this.yh_message_success('删除成功');
                this.getSpecialTemplateList(this.paging, this.hsCode, this.modifyDate, this.templateCode, this.templateName);
            })
            .catch(() => {
                this.loading = false;
                // this.yh_message_success('删除失败');
            });
    }

    // 翻页
    currentChange() {
        this.getSpecialTemplateList(this.paging, this.hsCode, this.modifyDate, this.templateCode, this.templateName);
    }

    // 查询
    specialClick() {
        this.specialVisible = false;
        this.getSpecialTemplateList(this.paging, this.hsCode, this.modifyDate, this.templateCode, this.templateName);
    }

    handleSelectionChange(val: any) {
        this.selectionList = val;
        // if (val.length) {
        //     this.selectionList = val.map(ele => ele.specialCode);
        // } else {
        //     this.selectionList = [];
        // }
    }

    openStatusDialog(val: string) {
        let text = '';
        let status = '';
        this.changeStatus = val;
        if (this.type == 'special') {
            text = '特殊计算项';
        } else {
            text = '分母';
        }
        if (val == '1') {
            status = '启用';
        } else {
            status = '禁用';
        }
        if (this.selectionList.length === 0) {
            return this.yh_message_warn('请选择' + text);
        }

        // 筛选后的列表
        let actualSelectedList = this.selectionList.filter(ele => ele.status !== val);
        if (actualSelectedList.length) {
            this.selectionCodeList = actualSelectedList.map(ele => ele.specialCode);
        } else {
            this.selectionCodeList = [];
            return this.yh_message_error('选择的' + text + '已是' + status + '状态');
        }
        this.statusDialog = true;
        if (val == '1') {
            this.dialogTitle = '确定启用以下' + text + '吗？';
        } else {
            this.dialogTitle = '确定禁用以下' + text + '吗？';
        }
    }

    // 禁用、启用
    handleStatusChange() {
        this.loading = true;
        this.$axios
            .post(this.api + '/status/' + this.changeStatus, this.selectionCodeList)
            .then(res => {
                this.queryData();
                this.yh_message_success('操作成功');
                this.loading = false;
                this.statusDialog = false;
                this.selectionList = [];
            })
            .catch();
    }
    handleSort(column): void {
        let sortType = column.order == 'ascending' ? 'ASC' : column.order == 'descending' ? 'DESC' : '';
        if (sortType) {
            this.sort = this.sortableObj[column.prop] + ' ' + sortType;
        } else {
            this.sort = '';
        }
        this.paging.currentPage = 1;
        this.getSpecialTemplateList(this.paging, this.hsCode, this.modifyDate, this.templateCode, this.templateName);
    }
}
</script>
<style lang="scss" scoped>
.special,
.deno {
    color: #222;
    height: calc(100vh - 50px);
    padding: 10px;

    .buts {
        display: flex;
        width: calc(100vw - 20px);
        border: 1px solid #eee;
        padding: 10px;
        .el-input {
            width: 230px;
            margin-right: 15px;
        }
    }

    .tables {
        margin-top: 10px;
        width: calc(100vw - 20px);
        height: calc(100vh - 140px);
        border: 1px solid #eee;
        padding: 10px;
    }

    .delete {
        padding: 20px 10px;
    }
}
</style>
